<template>
	<!-- 
		@mouseenter="" 事件在鼠标指针进入 div 元素时触发，不支持冒泡
		@mouseleave="" 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件 
		 
		@mouseover="" 事件在鼠标指针进入 div 元素时触发 ,在子元素上也会触发(p 和 span)
		@mouseout="" 鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件
		 
		不论
		
	 -->
	<li @mouseenter="handleShow(true)" @mouseleave="handleShow(false)" :style="{background:bkGroud}">
	  <label>
		  <!-- todo.flog 为布尔值，此处可以关联-->
		<input type="checkbox" v-model="todo.flog"/>
		<span>{{todo.title}}</span>
	  </label>
	  <button class="btn btn-danger" v-show="isShow" @click="del">删除</button>
	</li>
</template>

<script>
 export default {
	 props:{
		 index: Number,
		 todo:Object,
		 delTodo:Function
	 },
	 data() {
		 return{
			 isShow:false,
			 bkGroud:'white'
		 }
	 },
	 methods:{
		 del() {
			 if(window.confirm("确定要删除此任务么？")) {
				 this.delTodo(this.index);
			 }
		 },
		 
		 // 鼠标移入移除调用的函数
		 handleShow(isF) {
			 if(isF) {
				 this.isShow = true;
				 this.bkGroud = '#aaa';
			 } else {
				 this.isShow = false;
				 this.bkGroud = 'white'
			 }
		 }
	 }
 }
</script>

<style>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>
